<script setup lang="ts">
import { computed, defineExpose, onMounted, onUnmounted } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import dayjs from 'dayjs'
import { meetSchedule } from '@/apis/meet/component'
import type { EventObject } from '@/types/compoment'

const props = defineProps({
  type: Number || String
})

// 使用defineEmits注册一个自定义事件
const emit = defineEmits(['calendardata']); const meetCalendarType = ref() // 会议日历的状态
const todayDate = ref() // 今天日期
const fullCalendar = ref('resourceTimelineDay') // 创建模板引用
const eventData = ref<EventObject[]>() // event数据源对象
// 存储 API 实例
const calendarApi = ref()
const popoverVisible = ref(false)
const currentEvent = ref(null)

// 添加新的弹窗状态控制变量
const participantsModalVisible = ref(false)
const modalParticipants = ref<any[]>([])
const modalTitle = ref('')

// 在script setup中添加自定义弹窗逻辑
const moreEventsModalVisible = ref(false)
const moreEventsModalTitle = ref('')
// 修正moreEventsList类型，避免类型推断为never
const moreEventsList = ref<any[]>([])
function showMoreEventsModal(info) {
  // info.date: 当前日期
  // info.allSegs: 所有事件segments
  moreEventsModalTitle.value = `${dayjs(info.date).format('YYYY-MM-DD')}全部会议`
  moreEventsList.value = info.allSegs.map((seg) => seg.event)
  moreEventsModalVisible.value = true
}

const displayParticipants = computed(() => {
  if (!currentEvent.value?._def?.extendedProps?.participants) return []
  const participants = currentEvent.value._def.extendedProps.participants
  return participants.slice(0, 6)
})

// 打开参与者弹窗
const openParticipantsModal = (event) => {
  if (event._def?.extendedProps?.participants) {
    modalParticipants.value = event._def.extendedProps.participants || []
    modalTitle.value = event.title
    participantsModalVisible.value = true
  }
}

const handleEventClick = (event: any) => {
  currentEvent.value = event
  popoverVisible.value = true
}

const calendarOptions = ref({
  plugins: [dayGridPlugin], // 引入的插件
  headerToolbar: {
    // 日历头部按钮位置和类型
    left: '',
    center: '',
    right: ''
  },
  customButtons: {},
  height: 400,
  eventMaxStack: 10, // 增加堆叠的最大数量
  dayMaxEventRows: 3, // 只显示3行，超出显示“更多”
  moreLinkClick(info) {
    // 阻止默认popover，改为自定义弹窗
    showMoreEventsModal(info)
    return 'none'
  },
  // 高级功能许可key，需要用到高级功能时候添加上，避免左下角出现警告提醒
  schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  buttonText: {
    today: '今天',
    resourceTimelineMonth: '月',
    week: '周',
    resourceTimelineDay: '日'
  }, // 自定义头部按钮文字
  // timeZone: "UTC",
  aspectRatio: 1.5, // 设置日历单元格宽度与高度的比例。
  editable: true,
  resourceAreaHeaderContent: '会议室',
  initialView: 'dayGridMonth', // 默认视图当前为resourceTimeline
  events: eventData.value, // 日程数据源
  eventClick(info) {
    info.jsEvent.stopPropagation()
    handleEventClick(info.event)
  },
  locale: 'zh-cn', // 切换语言，当前为中文
  handleWindowResize: true, // 是否随浏览器窗口大小变化而自动变化。
  timeFormat: 'H:mm', // 日期显示格式
  timeZone: 'Asia/Shanghai' // 根据实际情况设置
  // eventColor: "#f08f00", // 修改日程背景色
})

const data = reactive([
  {
    // 测试数据
    key: '1',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '2',
    name: 'Alisa Ross',
    salary: 25000,
    address: '35 Park Road, London',
    email: 'alisa.ross@example.com'
  },
  {
    key: '3',
    name: 'Kevin Sandra',
    salary: 22000,
    address: '31 Park Road, London',
    email: 'kevin.sandra@example.com'
  },
  {
    key: '4',
    name: 'Ed Hellen',
    salary: 17000,
    address: '42 Park Road, London',
    email: 'ed.hellen@example.com'
  },
  {
    key: '5',
    name: 'William Smith',
    salary: 27000,
    address: '62 Park Road, London',
    email: 'william.smith@example.com'
  }
])

// 创建自定义指令,监听资源组的滑动事件
const vResourceHover = {
  mounted(el: HTMLElement) {
    el.addEventListener('mouseenter', () => {
      el.classList.add('resource-hover')
    })
    el.addEventListener('mouseleave', () => {
      el.classList.remove('resource-hover')
    })
  }
}
/**
 * 日程今天按钮事件
 */
const todayToChange = () => {
  calendarApi.value.today()
  nextTick()
  todayDate.value = calendarApi.value.currentData.viewTitle
  getCalendarData()
}
/**
 * 上一天
 */
const prevChange = () => {
  calendarApi.value.prev()
  nextTick()
  todayDate.value = calendarApi.value.currentData.viewTitle
  getCalendarData()
}
/**
 * 下一天
 */
const nextChange = () => {
  calendarApi.value.next()
  nextTick()
  todayDate.value = calendarApi.value.currentData.viewTitle
  getCalendarData()
}
/**
 * 请求会议日历数据
 */
const getCalendarData = async () => {
  const splitResult = todayDate.value.split(/[年月]/) // 切割当前日期格式
  // 分解当前的年月日，作为参数传递网络请求
  const req = {
    conferenceState:
      meetCalendarType.value === undefined ? '' : meetCalendarType.value,
    year: splitResult[0],
    month: splitResult[1]
  }
  const res = await meetSchedule(req.conferenceState, req.year, req.month)

  const transformed = []
  res.data.forEach((item) => {
    // 主会议本身
    const mainEvent = {
      title: item.subject,
      start: item.startTime,
      end: item.endTime,
      id: item.id,
      extendedProps: { ...item }
    }
    transformed.push(mainEvent)
    // 处理subMeet为[{sub:[...]}]结构
    if (Array.isArray(item.subMeet)) {
      item.subMeet.forEach((monthObj) => {
        if (Array.isArray(monthObj.sub)) {
          monthObj.sub.forEach((sub, idx) => {
            if (sub.startTime === item.startTime && sub.endTime === item.endTime) return
            transformed.push({
              title: item.subject,
              start: sub.startTime,
              end: sub.endTime,
              id: `${item.id}_sub_${sub.id || idx}`,
              extendedProps: { ...item, subMeet: undefined }
            })
          })
        }
      })
    }
  })
  eventData.value = transformed

  // 强制刷新日历事件
  if (calendarApi.value) {
    calendarApi.value.removeAllEvents()
    calendarApi.value.addEventSource(eventData.value)
  }
}
watch(
  () => props.type, // 监听的属性
  (newVal, oldVal) => {
    // 变化时的回调函数
    meetCalendarType.value = newVal
    getCalendarData()
    emit('calendardata', data)
  }
)

// 处理日历弹窗的全局点击事件
const handleCalendarPopoverClick = (e: MouseEvent) => {
  const target = e.target as HTMLElement
  const popover = document.querySelector('.fc-popover')

  if (popover) {
    // 如果点击发生在弹窗内部，且不是关闭按钮，则阻止事件传播
    if (popover.contains(target) && !target.closest('.fc-popover-close')) {
      e.stopPropagation()
      e.preventDefault()
    }
  }
}

// 在生命周期钩子中添加和移除事件监听器
onMounted(() => {
  // 添加全局点击事件监听器
  document.addEventListener('click', handleCalendarPopoverClick, true)

  nextTick(() => {
    calendarApi.value = fullCalendar.value.getApi()
    todayDate.value = calendarApi.value.currentData.viewTitle
    meetCalendarType.value = props.type
    if (todayDate.value) {
      getCalendarData()
    }
  })
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  document.removeEventListener('click', handleCalendarPopoverClick, true)
})

// 添加时间格式化函数
const formatDate = (date: Date) => {
  // 创建新的Date对象，避免修改原始日期
  const localDate = new Date(date)
  // 调整时区
  localDate.setHours(localDate.getHours() - 8)

  const year = localDate.getFullYear()
  const month = String(localDate.getMonth() + 1).padStart(2, '0')
  const day = String(localDate.getDate()).padStart(2, '0')
  const hours = String(localDate.getHours()).padStart(2, '0')
  const minutes = String(localDate.getMinutes()).padStart(2, '0')

  return `${year}-${month}-${day} ${hours}:${minutes}`
}
defineExpose({
  refresh: getCalendarData
})
</script>

<template>
  <div style="padding: 1rem; overflow-y: scroll">
    <div style="margin-top: 10px">
      <div class="demo-app">
        <div class="demo-app-main">
          <div class="calendar-controls">
            <div class="calendar-nav-actions">
              <a-button type="text" class="calendar-nav-btn" @click="prevChange()">
                <template #icon>
                  <icon-left />
                </template>
              </a-button>
              <div class="calendar-date-display">{{ todayDate }}</div>
              <a-button type="text" class="calendar-nav-btn" @click="nextChange()">
                <template #icon>
                  <icon-right />
                </template>
              </a-button>
            </div>
            <a-button type="primary" class="calendar-today-btn" @click="todayToChange()">
              本月
            </a-button>
          </div>
          <FullCalendar
            ref="fullCalendar"
            class="demo-app-calendar"
            :options="calendarOptions"
          >
            <!-- 添加自定义指令到资源单元格 -->
            <template #resourceLabelContent="arg">
              <a-popover trigger="hover" position="right">
                <div>
                  <div
                    v-resource-hover
                    class="custom-resource-cell"
                    :data-resource-id="arg.resource.id"
                    style="
                      text-overflow: ellipsis;
                      overflow: hidden;
                      max-width: 100px;
                    "
                  >
                    <p>{{ arg.resource.title }}</p>
                  </div>
                </div>
                <!-- Popover 弹层内容 -->
                <template #content>
                  <!-- 这里可以自由组合弹层内容 -->
                  {{ arg.resource.title }}
                </template>
              </a-popover>
            </template>
            <!-- 日程的插槽内容 -->
            <template #eventContent="arg">
              <a-popover trigger="click" position="lt" content-class="calendar-event-popover">
                <div style="z-index: 10; width: 100%; height: 100%;">
                  <b>{{ arg.timeText }}</b>
                  <i>{{ arg.event.title }}</i>
                </div>
                <template #content>
                  <div>
                    <h3 style="max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                      {{ arg.event.title }}
                    </h3>
                    <p>
                      {{ formatDate(arg.event.start) }}
                      ——
                      {{ formatDate(arg.event.end) }}
                    </p>
                    <p style="margin-top: 10px;font-weight: bold;">发起人：{{ arg.event._def.extendedProps.createUserName || "无" }}</p>
                    <p style="margin-top: 10px;font-weight: bold;">参与人：</p>
                    <div class="participants-container">
                      <div v-for="item in displayParticipants" :key="item.id" class="participant-item">
                        <a-avatar
                          :size="32"
                          :image-url="item.avatar"
                          class="participant-avatar"
                          :style="{ backgroundColor: 'transparent' }"
                        >
                          {{ item.realname ? item.realname.substring(0, 1) : '?' }}
                        </a-avatar>
                        <span class="participant-name">{{ item.realname }}</span>
                      </div>
                    </div>
                    <div v-if="arg.event._def.extendedProps.participants.length > 6" class="participants-more">
                      <a-button type="text" @click.stop="openParticipantsModal(arg.event)">
                        查看全部参与者 ({{ arg.event._def.extendedProps.participants.length }})
                      </a-button>
                    </div>
                    <p style="margin-top: 10px;font-weight: bold;">
                      周期会议：{{ arg.event._def.extendedProps.circleType === 0 ? "否" : "是" }}
                    </p>
                    <p style="margin-top: 10px;font-weight: bold;">
                      会议类型：{{ arg.event._def.extendedProps.meetType === 0 ? "线下" : "线上" }}
                    </p>
                    <p v-if="arg.event._def.extendedProps.meetType === 0" style="margin-top: 10px;font-weight: bold;">
                      会议室：{{ arg.event._def.extendedProps.meetingRoomName || "无" }}
                    </p>
                  </div>
                </template>
              </a-popover>
            </template>

            <template #resourceContent="arg">
              <div>1111</div>
              {{ arg.event + 111 }}
            </template>
          </FullCalendar>
        </div>
      </div>
    </div>

    <!-- 添加参与者Modal -->
    <a-modal v-model:visible="participantsModalVisible"
        title="会议参与者"
        :footer="false"
        :width="800"
        :mask-closable="true"
        @cancel="participantsModalVisible = false">
      <div class="modal-participants-title">
        <h3>{{ modalTitle }}</h3>
        <p>全部参与者 ({{ modalParticipants.length }})</p>
      </div>
      <div class="modal-participants-list">
        <div v-for="(item, index) in modalParticipants" :key="item.id || index" class="modal-participant-item">
          <a-avatar
            :size="36"
            :image-url="item.avatar"
            class="participant-avatar"
            :style="{ backgroundColor: 'transparent' }"
          >
            {{ item.realname ? item.realname.substring(0, 1) : '?' }}
          </a-avatar>
          <div class="modal-participant-info">
            <div class="modal-participant-name">{{ item.realname || '未知用户' }}</div>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model:visible="moreEventsModalVisible" :title="moreEventsModalTitle" :footer="false" width="600px" :body-style="{ maxHeight: '60vh', overflowY: 'auto' }">
      <div v-if="moreEventsList.length === 0">暂无会议</div>
      <div v-else>
        <div v-for="event in moreEventsList" :key="event.id" style="margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px dashed #e5e6eb; background: #f8faff; border-radius: 6px;">
          <div style="font-weight: bold; font-size: 18px; color: #1d2129; margin-bottom: 6px;">{{ event.title }}</div>
          <div style="color: #888; font-size: 13px;">{{ formatDate(event.start) }} —— {{ formatDate(event.end) }}</div>
          <div style="margin-top: 4px;">发起人：{{ event._def.extendedProps.createUserName || '无' }}</div>
          <div style="margin-top: 4px;">会议类型：{{ event._def.extendedProps.meetType === 0 ? '线下' : '线上' }}</div>
          <div v-if="event._def.extendedProps.meetType === 0" style="margin-top: 4px;">会议室：{{ event._def.extendedProps.meetingRoomName || '无' }}</div>
          <div style="margin-top: 4px;">周期会议：{{ event._def.extendedProps.circleType === 0 ? '否' : '是' }}</div>
          <!-- 参会人展示 -->
          <div style="margin-top: 4px;">参会人：</div>
          <div class="participants-container">
            <div v-for="item in (event._def.extendedProps.participants ? event._def.extendedProps.participants.slice(0, 6) : [])" :key="item.id" class="participant-item">
              <a-avatar :size="32" :image-url="item.avatar" class="participant-avatar" :style="{ backgroundColor: 'transparent' }">
                {{ item.realname ? item.realname.substring(0, 1) : '?' }}
              </a-avatar>
              <span class="participant-name">{{ item.realname }}</span>
            </div>
          </div>
          <div v-if="event._def.extendedProps.participants && event._def.extendedProps.participants.length > 6" class="participants-more">
            <a-button type="text" @click.stop="openParticipantsModal(event)">
              查看全部参与者 ({{ event._def.extendedProps.participants.length }})
            </a-button>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<style>
.demo-app {
  display: flex;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-sidebar {
  width: 700px;
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}

.demo-app-main {
  width: 70vw;
}

:deep(.custom-resource-cell:hover) {
  background: #e6f7ff;
}

.arco-radio-group-button {
  background-color: transparent;
}

.eee {
  margin-right: 10px;
}

/* 禁用伪元素，打开日程跨日点击事件 */
.fc-event::before {
  pointer-events: none !important;
}

.fc-daygrid-event-harness {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 确保整个会议条都可以触发点击事件 */
:deep(.fc-event), :deep(.fc-daygrid-event) {
  cursor: pointer;
  pointer-events: all !important;
}

:deep(.fc-event-main) {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* FullCalendar 更多弹窗相关样式，防止点击内部元素时关闭 */
:deep(.fc-popover) {
  z-index: 100 !important;
}

:deep(.fc-popover-body) {
  pointer-events: all !important;
}

:deep(.fc-popover .fc-event) {
  pointer-events: all !important;
}

/* 防止点击弹窗内容时关闭 */
:deep(.fc-popover-body *) {
  pointer-events: auto !important;
}

/* 只有点击关闭按钮才关闭弹窗 */
:deep(.fc-popover-close) {
  cursor: pointer;
  z-index: 200;
}

.meeting-detail {
  padding: 16px;
}

.meeting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.meeting-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
  margin: 0;
}

.meeting-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4e5969;
  font-size: 14px;
  margin-bottom: 20px;
  padding: 8px 12px;
  background: #f2f3f5;
  border-radius: 4px;
}

.meeting-time .time {
  color: #165dff;
  font-weight: 500;
}

.meeting-time .separator {
  color: #86909c;
}

.meeting-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #4e5969;
}

.info-item .icon {
  font-size: 16px;
  color: #165dff;
  margin-top: 2px;
}

.info-item .label {
  color: #86909c;
  min-width: 70px;
}

.info-item .value {
  color: #1d2129;
  flex: 1;
}

.event-content {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

.event-content:hover {
  background-color: rgba(22, 93, 255, 0.1);
}

.event-content b {
  font-weight: 500;
  color: #165dff;
}

.event-content i {
  font-style: normal;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 日历事件冒泡卡片样式 */
:deep(.calendar-event-popover) {
  width: 320px !important;
  height: auto !important;
  overflow: visible !important;
}

:deep(.calendar-event-popover .arco-popover-content) {
  width: 320px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

:deep(.calendar-event-popover .arco-popover-content-inner) {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 16px !important;
}

/* 调整参与者容器尺寸适应固定宽度 */
.participants-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 8px;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  padding-right: 4px;
}

.participants-container::-webkit-scrollbar {
  width: 4px;
}

.participants-container::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

.participants-container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* 参与者项样式 */
.participant-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background-color: #f7f8fa;
  border-radius: 12px;
  transition: all 0.2s;
  width: 100%;
  min-width: 0;
}

.participant-item:hover {
  background-color: #eef5ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(22, 93, 255, 0.1);
}

.participant-avatar {
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #e5e6eb;
  object-fit: cover;
  background-color: #eef5ff;
  color: #165dff;
  flex-shrink: 0;
}

.participant-name {
  font-size: 14px;
  color: #1d2129;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 优化冒泡窗口参与者样式 */
:deep(.calendar-event-popover) .participant-item {
  padding: 2px 4px;
  border-radius: 8px;
  min-width: 0;
}

:deep(.calendar-event-popover) .participant-avatar {
  width: 24px;
  height: 24px;
  font-size: 12px;
  flex-shrink: 0;
}

:deep(.calendar-event-popover) .participant-name {
  font-size: 12px;
  max-width: calc(100% - 28px);
}

.participants-more {
  margin-top: 8px;
  text-align: center;
}

.participants-more :deep(.arco-btn-text) {
  color: #165dff;
  font-size: 14px;
}

.participants-more :deep(.arco-btn-text:hover) {
  color: #0e42d2;
}

.calendar-container {
  position: relative;
}

.event-popover {
  padding: 16px;
}

.event-header {
  margin-bottom: 16px;
}

.event-header h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
}

.event-time {
  color: #86909c;
  font-size: 14px;
}

.event-participants {
  border-top: 1px solid #f2f3f5;
  padding-top: 16px;
}

.participants-title {
  font-weight: 500;
  margin-bottom: 8px;
}

.participants-list {
  max-height: 300px;
  overflow-y: auto;
}

.modal-participants-title {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f2f3f5;
}

.modal-participants-title h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
  color: #1d2129;
}

.modal-participants-title p {
  margin: 0;
  color: #86909c;
  font-size: 14px;
}

.modal-participants-list {
  max-height: 65vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding-right: 5px;
}

.modal-participant-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #f7f8fa;
  border-radius: 6px;
  transition: all 0.2s;
}

.modal-participant-item:hover {
  background-color: #e5e6eb;
}

.modal-participant-info {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.modal-participant-name {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 自定义日程条目样式 */
:deep(.fc-daygrid-event) {
  padding: 4px 8px;
  background-color: rgba(238, 245, 255, 0.8);
  border-left: 3px solid #165dff;
  border-radius: 4px;
  transition: all 0.2s;
  margin-bottom: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

:deep(.fc-daygrid-event:hover) {
  background-color: #e0eeff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

:deep(.fc-daygrid-day-bottom) {
  padding: 2px 0;
}

/* 美化日历单元格 */
:deep(.fc-daygrid-day) {
  transition: background-color 0.2s;
}

:deep(.fc-daygrid-day:hover) {
  background-color: rgba(240, 242, 245, 0.4);
}

:deep(.fc-daygrid-day.fc-day-today) {
  background-color: rgba(238, 245, 255, 0.5) !important;
}

/* 限制日程的高度，避免过多内容 */
:deep(.fc-daygrid-day-events) {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
  padding-left: 2px;
}

:deep(.fc-daygrid-day-events::-webkit-scrollbar) {
  width: 4px;
}

:deep(.fc-daygrid-day-events::-webkit-scrollbar-thumb) {
  background-color: #d9d9d9;
  border-radius: 4px;
}

:deep(.fc-daygrid-day-events::-webkit-scrollbar-track) {
  background-color: #f5f5f5;
}

/* 美化日历头部 */
:deep(.fc-col-header-cell) {
  background-color: #f7f8fa;
  font-weight: 600;
}

:deep(.fc-col-header-cell-cushion) {
  padding: 10px 0;
  color: #1d2129;
}

:deep(.fc-daygrid-day-number) {
  padding: 8px;
  color: #4e5969;
  font-weight: 500;
}

:deep(.fc-daygrid-day.fc-day-today .fc-daygrid-day-number) {
  background-color: #165dff;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
}

/* 改进的月份布局 */
:deep(.fc-dayGridMonth-view .fc-daygrid-body) {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e6eb;
}

:deep(.fc .fc-scrollgrid) {
  border-radius: 8px !important;
  overflow: hidden;
  border: 1px solid #e5e6eb !important;
}

:deep(.fc-scrollgrid-section-header) {
  background-color: #f7f8fa;
}

/* 美化表格线条 */
:deep(.fc-theme-standard td), :deep(.fc-theme-standard th) {
  border-color: #eaecf0;
}

:deep(.fc-theme-standard .fc-scrollgrid) {
  border-color: #eaecf0;
}

/* 美化头部工具栏 */
:deep(.fc-toolbar) {
  margin-bottom: 1.5em !important;
}

:deep(.fc-toolbar-title) {
  font-size: 1.25em !important;
  font-weight: 600;
  color: #1d2129;
}

:deep(.fc-button-primary) {
  background-color: #165dff !important;
  border-color: #165dff !important;
  box-shadow: none !important;
}

:deep(.fc-button-primary:hover) {
  background-color: #0e42d2 !important;
  border-color: #0e42d2 !important;
}

:deep(.fc-button-primary:not(:disabled):active),
:deep(.fc-button-primary:not(:disabled).fc-button-active) {
  background-color: #0e42d2 !important;
  border-color: #0e42d2 !important;
}

/* 美化特殊日期显示 */
:deep(.fc-day-other) {
  background-color: #fafafa;
  opacity: 0.8;
}

:deep(.fc-day-sat), :deep(.fc-day-sun) {
  background-color: rgba(250, 250, 250, 0.5);
}

/* 日历整体容器美化 */
.demo-app-calendar {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

/* 日历控制区样式 */
.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.calendar-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-date-display {
  font-size: 18px;
  font-weight: 500;
  color: #1d2129;
  min-width: 120px;
  text-align: center;
}

.calendar-nav-btn {
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #165dff;
  transition: all 0.2s;
}

.calendar-nav-btn:hover {
  background-color: rgba(22, 93, 255, 0.1);
}

.calendar-today-btn {
  padding: 0 16px;
  height: 32px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s;
}

.calendar-today-btn:hover {
  box-shadow: 0 4px 10px rgba(22, 93, 255, 0.2);
}

/* 美化弹出框和模态框 */
:deep(.arco-popover) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transform: translateZ(0);
  backdrop-filter: blur(4px);
}

:deep(.arco-popover-content) {
  width: 400px;
  max-height: 80vh;
  overflow: auto;
  padding: 16px;
  overflow: hidden;
}

:deep(.arco-popover-content::-webkit-scrollbar) {
  width: 4px;
}

:deep(.arco-popover-content::-webkit-scrollbar-thumb) {
  background-color: #d9d9d9;
  border-radius: 4px;
}

:deep(.arco-popover-content::-webkit-scrollbar-track) {
  background-color: #f5f5f5;
}

:deep(.arco-popover-arrow) {
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.05);
}

:deep(.arco-modal) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

:deep(.arco-modal-header) {
  border-bottom: 1px solid #f2f3f5;
  padding: 16px 20px;
}

:deep(.arco-modal-title) {
  font-weight: 600;
  color: #1d2129;
}

:deep(.arco-modal-body) {
  padding: 20px;
}

:deep(.arco-modal-footer) {
  border-top: 1px solid #f2f3f5;
  padding: 16px 20px;
}

/* 修饰元素的过渡效果 */
:deep(.arco-popover),
:deep(.fc-event),
:deep(.fc-daygrid-day),
:deep(.a-button),
:deep(.modal-participant-item),
:deep(.participant-item) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
